<template>
  <div class="cateList">
    <div class="btn">
      <el-form :inline="true" size="small">
        <el-button type="primary" size="small" @click="toAdd">添加</el-button>
      </el-form>
    </div>

    <el-table
      :data="cateData.data"
      size="small"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
    >
      <el-tree
        :data="cateData.data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
      <el-table-column prop="name" width="150" label="名称" align="center" />
      <el-table-column label="父栏目" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.parentId === null">无</div>
          <div v-else>{{ scope.row.parentId }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.prevent="del(scope.row.id)"
          >
            删除
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.prevent="toUpdate(scope.row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <!-- 表单开始 -->
      <el-form
        :model="cateForm"
        :rules="rules"
        ref="cateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="cateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="no">
          <el-input v-model="cateForm.no"></el-input>
        </el-form-item>
        <el-form-item label="父栏目" prop="parentId">
          <el-select v-model="cateForm.parentId" @change="handleChange">
            <el-option
              v-for="item in cateData.data"
              :key="item.id"
              :label="item.id + item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 表单结束 -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      cateData: {},
      defaultProps: {
        children: "children",
        label: "name",
      },
      cateForm: {},
      dialogVisible: false,
      dialogTitle: "",
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      id: undefined,
    };
  },
  methods: {
    async submitClick() {
      this.$refs["cateForm"].validate((valid) => {
        if (valid) {
          post("/category/saveOrUpdate", this.cateForm).then((response) => {
            this.$notify({
              title: "成功",
              message: response.message,
              type: "success",
            });
            // console.log(response);
            get("/category/findCategoryTree").then((res) => {
              this.cateData = res;
            });
            this.dialogVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    toAdd() {
      this.dialogTitle = "添加资讯分类";
      this.cateForm = {};
      this.dialogVisible = true;
    },
    toUpdate(row) {
      this.dialogTitle = "修改资讯分类";
      this.cateForm = row;
      this.id = row.id;
      // console.log(this.cateForm.id);
      this.dialogVisible = true;
    },
    handleNodeClick() {
      console.log("1");
    },
    del(id) {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          get("/category/deleteById", { id: id }).then((res) => {
            if (res.message == "删除成功") {
              this.$notify({
                title: "成功",
                message: res.message,
                type: "success",
              });

              get("/category/findCategoryTree").then((res) => {
                this.cateData = res;
              });
            } else {
              this.$notify({
                title: "失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$notify({
                message: '删除失败',
                type: "info",
              });
        });
    },
    // 重置表单校验
    clearValidate() {
      this.$refs["cateForm"].clearValidate();
    },
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          // 清空表单
          this.$refs["cateForm"].resetFields();
          this.dialogVisible = false;
          done();
        })
        .catch((_) => {});
    },
    handleChange(value) {
      // console.log(value);
      this.cateForm.parentId = value;
    },
  },
  created() {
    get("/category/findCategoryTree").then((res) => {
      this.cateData = res;
    });
  },
};
</script>

<style scoped>
</style>